 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
         *{
             margin: 0px;
             padding: 0px;
         }
         body{
             background: url(./images/bg.jpg)  center top;
      
         }
         .wrapper{
             width: 1089px;
             /* height: 429px; */
             margin:262px auto;
             /* background-color: red; */
         }
         .wrapper .item{
             float: left; 
             cursor: pointer;
         }
         .wrapper .item p{
             display: block;
             width: 14px;
             /* height: 359px; */
             margin-top: 70px;
             margin-left: 50px;
            background-color: rgba(0, 0,0,0.1);
             color: white;
             text-align:  center;
            
         }
         .wrapper .item:nth-child(1){
             width: 789px;
             height: 429px;
             background: url(./images/1.jpg);
         }
         .wrapper .item:nth-child(2){
             width: 100px;
             height: 429px;
             background: url(./images/2.jpg);
         }
         .wrapper .item:nth-child(3){
             width: 100px;
             height: 429px;
             background: url(./images/3.jpg);
         }
         .wrapper .item:nth-child(4){
             width: 100px;
             height: 429px;
             background: url(./images/4.jpg);
         }

     </style>
 </head>
 <body>
     <!-- 789*429 -->
     <div class="wrapper">
         <div class="item">
             <p>我的个人拉萨之旅 | | 故事之城</p>
         </div>
         <div class="item">
             <p>我的个人拉萨之旅 | | 故事之城</p>
         </div>
         <div class="item">
             <p>我的个人拉萨之旅 | | 故事之城</p>
         </div>
         <div class="item">
             <p>我的个人拉萨之旅 | | 故事之城</p>
         </div>
     </div>
     
     <script src="./js/jquery.js"></script>
    <script>
        $(function(){
            $(".wrapper .item").click(function(){
                // console.log( $(this));
                $(this).siblings().stop().animate({
                    "width":"100px"
                })
                $(this).stop().animate({
                    "width":"789px"
                })
            })
        })
    </script>

 </body>
 </html>